<template>
  <div class="nav_outer">
    <Header tooltext="删除" @herttool="delexpirence">工作经历</Header>
    <div class="content">
      <div class="edits">
        <div class="edit">
          <div class="edit_title">工厂名字</div>
          <div class="edit_conten">
            <input type="text" placeholder="请输入" v-model="factoryName" />
          </div>
        </div>
        <div class="edit">
          <div class="edit_title">职位</div>
          <div class="edit_conten">
            <input type="text" placeholder="请输入" v-model="workTitle" />
          </div>
        </div>
        <div class="edit" @click="chooseDate(1)">
          <div class="edit_title">工作开始时间</div>
          <div class="edit_conten">
            <div class="oheight"><span v-if="!workFrom">请选择</span>{{workFrom  | splidate}}</div>
          </div>
        </div>
        <div class="edit" @click="chooseDate(2)">
          <div class="edit_title">工作结束时间</div>
          <div class="edit_conten">
            <div class="oheight"><span v-if="!workTo">请选择</span>{{workTo | splidate}}</div>
          </div>
        </div>
      </div>
      <div class="btn" @click="savexpeire">保存</div>
    </div>
  </div>
</template>

<script>
import Header from "@/components/commonComponents/Header";
export default {
  data() {
    return {
      factoryName: "",
      workTitle: "",
      workFrom: "",
      workTo: "",
      eid: ""
    };
  },
  created() {
    let id = (this.eid = this.$route.query.eid);
    if(id){
        this.loadDetail();
    }
  },
  mounted() {
    let mui = this.mui;
    this.dtPicker = new mui.DtPicker({ type: "date",beginYear: 1980,endYear: 2030 });
  },
  methods: {
    loadDetail() {
      this.Http.get("/yzj/personal/app/work_experience", {
        workExperienceId: this.eid
      }).then(res => {
        this.factoryName = res.factoryName;
        this.workTitle = res.workTitle;
        this.workFrom = res.workFrom;
        this.workTo = res.workTo;
      });
    },
    chooseDate(type) {
      let that = this;
      this.dtPicker.show(function(selectItems) {
        let date = selectItems.value + " 00:00:00";
        if (type == 1) {
          that.workFrom = date;
        } else {
          that.workTo = date;
        }
      });
    },
    getunix(date){
      let rep = date.replace('-','/');
      return new Date(rep).getTime();
    },
    savexpeire() {
      if(!this.factoryName || !this.workTitle || !this.workFrom){
        this.mui.toast('信息输入不完整');
        return
      }
      let from = this.getunix(this.workFrom);
      let to =  this.workTo ? this.getunix(this.workTo) : 0;
      if(from>to && to){
        this.mui.toast('开始时间应早于结束时间');
        return
      }
      let type;
      let data = {
        customerId: localStorage.getItem("uid"),
        factoryName: this.factoryName,
        workTitle: this.workTitle,
        workFrom: this.workFrom,
        workTo: this.workTo
      };
      if (this.eid) {
        type = "put";
        data.id = this.eid;
      } else {
        type = "post";
      }
      this.Http[type]("/yzj/personal/app/work_experience", data).then(res => {
        this.$router.back();
      });
    },
    delexpirence(){
      let that = this;
      mui.confirm('确认删除吗?', '', ['取消','确定'], function(e) {
        if (e.index == 1) {
          that.Http.delete(`/yzj/personal/app/work_experience/${that.eid}`,null).then((res)=>{
            that.$router.back();
          })
        } else {
        }
      })
    }
  },
  components: {
    Header
  }
};
</script>

<style scoped lang='scss'>
@function px2em($px) {
  @if (unitless($px)) {
    @return px2em($px + 0px);
  } @else if (unit($px) == em) {
    @return $px;
  }
  @return ($px / 75px) * 1rem;
}
body {
  background: #f5f5f5 !important;
}
.content {
  color: #666;
  .ava {
    width: px2em(96);
    height: px2em(96);
    background: #ccc;
    border-radius: 50%;
    display: inline-block;
  }
  .edit {
    margin-top: px2em(10);
    background: #fff;
    display: flex;
    align-items: center;
    padding: px2em(16) px2em(28);
    .edit_conten {
      flex: 1;
      margin-left: 15px;
      text-align: right;
    }
    input {
      text-align: right;
      color: #333;
      font-size: 0.9em;
      padding-right: 0;
      &::-webkit-input-placeholder {
        color: #999;
      }
    }
  }
  .btn{
    margin: 15px 30px;
    height: px2em(80);
    border-radius: px2em(40);
    line-height: px2em(80);
    color: #fff;
    background: #ccc;
    text-align: center;
    background: #5681f3;
  }
}
.oheight {
  height: 40px;
  line-height: 40px;
}
</style>